<script setup lang="ts" name="aicome_index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
  nextTick,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import type {
  UploadProps,
  UploadUserFile,
  TabsPaneContext,
} from "element-plus";
import * as echarts from "echarts";

// 引入视频组件
import flvjs from "flv.js";

// 导入图片
import img1 from "../../../assets/image/home/png/text01 (1).png";

const url = img1;
const srcList = [img1];

const router = useRouter();

// 测试数据
// 上传
const resp = ref("rtsp://[username]");
const http = ref("http://username.commit");

const fileList = ref<UploadUserFile[]>([
  {
    name: "element-plus-logo.svg",
  },
  {
    name: "element-plus-logo2.svg",
  },
]);

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log(uploadFile);
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
    } totally`
  );
};

const beforeRemove: UploadProps["beforeRemove"] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfert of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  );
};

// 算法选择
const input = ref("");
const value = ref([]);
const value1 = ref([]);

const props = {
  expandTrigger: "hover",
};
const options = [
  {
    value: "编号1",
    label: "编号1",
  },
  {
    value: "编号2",
    label: "编号2",
  },
  {
    value: "编号3",
    label: "编号2",
  },
];
const option = [
  {
    value: "1",
    label: "人吸烟",
  },
  {
    value: "2",
    label: "烟雾",
  },
  {
    value: "3",
    label: "火苗",
  },
  {
    value: "4",
    label: "求救：举手挥舞",
  },
  {
    value: "5",
    label: "玩手机",
  },
  {
    value: "6",
    label: "打电话",
  },
  {
    value: "7",
    label: "跌倒",
  },
  {
    value: "8",
    label: "睡觉",
  },
  {
    value: "9",
    label: "是否头盔",
  },
  {
    value: "10",
    label: "是否反光衣",
  },
  {
    value: "11",
    label: "人脸识别",
  },
];

// 视频列表
const numb = reactive({
  num1: 105,
  num2: 104,
  num3: 99.5,
  num4: 1,
});

onMounted(() => {
  // flv视频格式
  // 图表
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById("main")!;
  var myChart = echarts.init(chartDom);
  window.onresize = function () {
    myChart.resize();
  };
  var option2: EChartsOption;

  option2 = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {},
    grid: {
      top: "5%",
      left: "2%",
      right: "4%",
      bottom: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: ["未戴安全帽", "未穿反光背心", "玩手机", "吸烟"],
    },
    series: [
      {
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: [35, 26, 22, 45],
      },
    ],
  };

  option2 && myChart.setOption(option2);
});

// 视频列表
const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const video1 = reactive([
  {
    num: "01",
    time: "2022-03-7",
    source: "直播",
  },
  {
    num: "02",
    time: "2022-04-19",
    source: "直播",
  },
  {
    num: "03",
    time: "2022-05-22",
    source: "直播",
  },
]);
const video2 = reactive([
  {
    num: "01",
    time: "2022-03-21",
    source: "视频",
  },
  {
    num: "02",
    time: "2022-04-24",
    source: "视频",
  },
]);
// 引入图片
</script>

<template>
  <div class="aicome">
    <div class="aicome-box-l">
      <div class="aicome-l-t">
        <div class="aicome-l-t-l">
          <!-- 摄像头配置 -->
          <div class="aicome-cont-a">
            <app-box class="aicome-hh" :title="'摄像头配置'">
              <div class="aicome-cont-a-hh">
              <div class="aicome-cont-b-a">
                <el-row>
                  <el-col :span="9"> RTSP流： </el-col>
                  <el-col :span="15">
                    <el-input v-model="input" placeholder="请输入rtsp流" clearable size="small"/>
                  </el-col>
                </el-row>
              </div>
              <div class="aicome-camera-b">
                <el-upload class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  multiple :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
                  :limit="3" :on-exceed="handleExceed">
                  <el-button type="primary" size="small">上传视频文件</el-button>
                </el-upload>
              </div>
              <div class="aicome-cont-b-a">
                <el-row>
                  <el-col :span="9"> 其他流： </el-col>
                  <el-col :span="15">
                    <el-input v-model="input" placeholder="请输入其他流" clearable size="small"/>
                  </el-col>
                </el-row>
              </div>
              </div>
            </app-box>
          </div>
          <!-- 算法选择 -->
          <div class="aicome-camera-cont">
            <app-box class="aicome-hh" :title="'算法选择'">
              <div class="aicome-cont-b-a">
                <el-row>
                  <el-col :span="9"> 相机编号： </el-col>
                  <el-col :span="15">
                    <el-cascader v-model="value" :options="options" size="small"/>
                  </el-col>
                </el-row>
              </div>
              <div class="aicome-cont-b-a">
                <el-row>
                  <el-col :span="9"> 相机名称： </el-col>
                  <el-col :span="15">
                    <el-input v-model="input" placeholder="相机名字" clearable size="small"/>
                  </el-col>
                </el-row>
              </div>
              <div class="aicome-cont-b-a">
                <el-row>
                  <el-col :span="9"> 算法： </el-col>
                  <el-col :span="15">
                    <el-cascader v-model="value1" :options="option" size="small"/>
                  </el-col>
                </el-row>
              </div>
              <div class="button-cascader">
                提交
                <!-- <el-button type="primary" size="small">提交</el-button> -->
              </div>
            </app-box>
          </div>
          <!-- 数量监控 -->
          <div class="aicome-cont-c">
            <app-box class="aicome-hh" :title="'数量监控'">
              <div class="aicome-echarts">
                <div class="aicome-echarts-l">报警总数</div>
                <div class="aicome-echarts-c"><span>128</span>次</div>
                <div class="aicome-echarts-r">
                  <img src="../../../assets/image/home/tubiao.svg" alt="" />
                </div>
              </div>
              <div id="main" style="height: 80%"></div>
            </app-box>
          </div>
        </div>
        <div class="aicome-l-t-r">
          <!-- 视频播放 -->
          <app-box class="aicome-cont" :title="'视频播放'">
            <div class="aicome-cont-text">
              <video width="1000" height="550" controls>
                <!-- <source :src="item.url" type="video/mp4" /> -->
                <source src="../../../assets/image/video.mp4" type="video/mp4" />
              </video>
            </div>
            <div>
              <!-- <video id="videoElement"></video> -->
            </div>
          </app-box>
        </div>
      </div>
      <div class="aicome-l-b">
        <dir class="aicome-l-b-img" v-for="index of 8" :key="index">
          <!-- 点击查看图片 -->
          <!-- <div class="demo-image" > -->
            <!-- <el-image
              style="width: 100%; height: 100%"
              :src="url"
              :preview-src-list="srcList"
              :initial-index="10"
              fit="cover"
            /> -->
            <img :src="url" alt="">
            <!-- <el-image style="width: 130px; height: 130px" :src="url" fit /> -->
          <!-- </div> -->
        </dir>
      </div>
    </div>
    <div class="aicome-box-r">
      <app-box class="aicome-cont" :title="'视频列表'">
        <div class="aicome-cont-list">
          <div>
            <div>
              总计：<span>{{ numb.num1 }}</span>
            </div>
            <div>
              合格率：<span>{{ numb.num3 }}</span>
            </div>
          </div>
          <div>
            <div>
              合格：<span>{{ numb.num2 }}</span>
            </div>
            <div>
              不合格：<span>{{ numb.num4 }}</span>
            </div>
          </div>
        </div>
        <!-- 视频内容 -->
        <div class="aicome-cont-list-top">
          <div class="aicome-list">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" stretch="false">
              <el-tab-pane label="AI检测" name="first">
                <div class="aicome-box" v-for="(item, index) in video1" :key="index">
                  <div class="aicome-top-r">NG</div>
                  <div>
                    <div>
                      <span class="aicome-span">序号：</span>
                      <span class="aicome-span-a">{{ item.num }}</span>
                    </div>
                    <div>
                      <span class="aicome-span">时间：</span>
                      <span class="aicome-span-a">{{ item.time }}</span>
                    </div>
                    <div>
                      <span class="aicome-span">来源：</span>
                      <span class="aicome-span-a">{{ item.source }}</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="人脸识别" name="second">
                <div class="aicome-box" v-for="(item, index) in video2" :key="index">
                  <div class="aicome-top-r">NG</div>
                  <div>
                    <div>
                      <span class="aicome-span">序号：</span>
                      <span class="aicome-span-a">{{ item.num }}</span>
                    </div>
                    <div>
                      <span class="aicome-span">时间：</span>
                      <span class="aicome-span-a">{{ item.time }}</span>
                    </div>
                    <div>
                      <span class="aicome-span">来源：</span>
                      <span class="aicome-span-a">{{ item.source }}</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </app-box>
    </div>
  </div>
</template>

<style lang="scss">
.aicome {
  display: flex;
  justify-content: space-between;
}

.aicome-hh {
  height: 100%;
}
.aicome-cont {
  height: 100%;
}



.aicome-cont-b {
  height: 30%;
}

.aicome-cont-b-a {
  color: #cccccc;
  // padding: 3px 0 0 0;
  font-size: 14px;
  line-height: 40px;
}


// 界面左
.aicome-box-l {
  width: calc(87% - 10px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.aicome-l-t {
  height: calc(80% - 10px);
  display: flex;
  justify-content: space-between;
}

.aicome-l-b {
  height: 20%;
  display: flex;
  justify-content: space-around;
  background-color: #0c0c0c;
  overflow: auto;
}

.aicome-l-t-l {
  width: calc(20% - 10px);
  height: calc(100% - 10px);
}

.aicome-l-t-r {
  width: 80%;
  overflow: auto;
}

// 界面右
.aicome-box-r {
  width: 13%;
  height: calc(100vh - 151px);
}

// 摄像头配置
.aicome-cont-a {

  height: 28%;
  font-size: 14px;
  overflow: auto;
  // overflow-x: hidden;
  // overflow-y: scroll;
}
// .aicome-cont-a-hh {
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
// }

// 算法选择
.aicome-camera-cont {
  height: calc(38% - 10px);
  margin: 10px 0;
  overflow: auto;
}

// 数据监控
.aicome-cont-c {
  height: 34%;
}
// .aicome-camera-a {
//   color: #cccccc;
//   padding: 45px;
// }

.aicome-camera-b {
  color: #cccccc;
  margin-top: 10px;
}

.aicome-cont-b {
  height: 100px;
}

// 算法
.button-cascader {
  width: 100%;
  height: 15%;
  text-align: center;
  margin-top: 5px;
  background-color: rgb(79, 169, 243);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-cascader:hover {
  background-color: rgb(61, 127, 182);
}

.button-cascader:active {
  color: rgb(44, 44, 44);
  background-color: rgb(20, 72, 114);
}

// 数据监控
.aicome-echarts {
  margin-top: 5px;
  font-size: 14px;
  color: #cccccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aicome-echarts-c span {
  font-size: 20px;
  color: #1bd9ec;
}

.aicome-echarts-r img {
  width: 25px;
  height: 25px;
}

// 视频列表
.aicome-cont-list {
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.aicome-cont-list {
  font-size: 14px;
  color: #1bd9ec;
}

.aicome-cont-list span {
  color: #ffffff;
}

// 视频切换
// 左
.aicome-box {
  display: flex;
  align-items: center;
}

.aicome-top-r {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  margin-right: 10px;
  background-color: rgb(218, 40, 40);
}

.aicome-span {
  font-size: 12px;
  color: #1bd9ec;
}

.aicome-span-a {
  font-size: 12px;
}

// 点击查看图片

.aicome-l-b-img {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: auto;
}
.aicome-l-b-img img{
  width: 120px;
  height: 120px;
  overflow: auto;
}

// .demo-image {
//   height: calc(100% - 5px);
//   margin: 3px;
// }

// 播放视频
.aicome-cont-text {
  margin-top: 20px;
  text-align: center;
}
</style>
